<template>
    <div class="app-container">

        <el-form ref="form" :rules="rules" class="form" :model="form" label-width="120px">
            <el-form-item class="input" label="名称"
                          prop="name"
                          required>
                <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item class="input" label="拼音"
                          prop="pinyin"
                          required>
                <el-input v-model="form.pinyin"></el-input>
            </el-form-item>

            <el-form-item label="商圈"
                          prop="areas">
                <el-tree class="tree" :data="form.areas" accordion
                         :props="{children: 'shopAreas',label: 'name'}"></el-tree>
                <el-input class="textarea" type="textarea" :autosize="{ minRows: 5, maxRows: 20 }" v-model="areasCode"></el-input>
            </el-form-item>

            <el-form-item label="地铁"
                          prop="areas">
                <el-tree class="tree" :data="subwaysFormate" accordion
                         :props="{children: 'stations',label: 'name'}"></el-tree>
                <el-input class="textarea" type="textarea" :autosize="{ minRows: 5, maxRows: 20 }" v-model="subwaysCode"></el-input>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="onReset">重置</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
  import fetch from '@/utils/fetch';
  import {parseTime} from '@/utils';
  import industries from '@/data/industries.json';
  import jsonFormat from 'json-format'


  export default {
    components: {},
    data() {
      return {

        form: {
          pinyin: '',
          name: '',
          areas: [],
          subways: [],
        },
        areasCode: '',
          subwaysFormate:[],
        subwaysCode: '',
        cities: {},
        defaultProps: {
          children: 'shopAreas',
          label: 'name'
        },
        rules: {
          name: { required: true, message: '请输入名称', trigger: 'blur' },
          pinyin: { required: true, message: '请输入拼音', trigger: 'blur' },
        },
        isNew: true
      }
    },
    watch: {
        'areasCode':function (val) {
            this.form.areas= JSON.parse(val);
        },
        'subwaysCode':function (val) {
            this.subwaysFormate = JSON.parse(val).map((group)=> {
                group.stations = group.stations.map((name)=>{
                    return {'name':name}
                })
                return group
            });
        },
    },
    created() {
      if (this.$route.params.id) {
        this.isNew = false;
        this.fetchData();
      }

    },
    computed: {

    },
    methods: {
      fetchData() {
        fetch({
          url: '/city/'+this.$route.params.id,
          method: 'get'
        }).then(res => {


          this.areasCode = jsonFormat(res.data.areas,{
              type: 'space',
              size: 2
          });

          //格式化
//          this.subwaysFormate = res.data.subways.map((group)=> {
//              group.stations = group.stations.map((name)=>{
//                  return {'name':name}
//              })
//              return group
//          });

          this.subwaysCode = jsonFormat(res.data.subways,{
              type: 'space',
              size: 2
          });
          Object.assign(this.form,res.data);

        });

      },
      onReset() {
        this.$refs.form.resetFields();
      },
      onSubmit() {
        this.$refs.form.validate((valid) => {
          if(this.subwaysCode){
            this.form.subways = JSON.parse(this.subwaysCode);
          }
          if (valid) {
            fetch({
              url: '/citie' + (this.isNew ? '' : '/' + this.$route.params.id),
              method: this.isNew ? 'post' : 'put',
              data: JSON.parse(JSON.stringify(this.form))
            }).then(res => {
              if (res.data.result.ok === 1) {
                this.$message('保存成功');
                this.$router.push('/setting/city');
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },


    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .checkbox-item{
        display: block;
        margin: 6px 20px 6px 10px;
    }
    .img{
        margin: 8px 0;
        width: 80px;
        height: 60px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        &[lazy=error],&[lazy=loading]{
            background-size: 50%;
        }
    }
    .time{
        word-break:break-all ;
    }
    .search-input{
        width: 300px;
    }
    .input{
        width: 300px;
    }

    .form{
        width: 960px;
    }
    .tree{
        width: 300px;
        display: inline-block;
    }
    .textarea{
        height: 100%;
        margin-left: 20px;
        width: 500px;
        vertical-align: top;
    }

</style>
